  <!-- 修改后的PestList.vue -->
<template>
    <div class="container">
      <!-- 列表视图 -->
      <div v-if="!currentPest">
        <div class="header">
          <h2>土壤墒情{{ farmland_id }}</h2>
          <el-button @click="goBack" type="primary">返回农田列表</el-button>
        </div>
        <el-table :data="soilData" style="width: 100%">
          <el-table-column prop="solid_id" label="土壤ID" width="120" />
          <el-table-column prop="moisture" label="湿度" />
          <el-table-column prop="ph" label="ph值" />
          <el-table-column prop="nitrogen" label="氮含量" />
          <el-table-column prop="potassium" label="磷含量" />
          <el-table-column prop="phosphorus" label="钾含量" />
          <el-table-column prop="temperature" label="温度" />
          <el-table-column prop="organic_matter" label="有机质含量" />
          <el-table-column prop="salinity" label="盐分" />
          <el-table-column prop="timestamp" label="数据采集时间" />
        </el-table>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, watch, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import axios from 'axios'
  import { ElMessage, ElButton, ElTable, ElTableColumn} from 'element-plus'
  import { getSoilData } from '@/api/farmland'
  
  const route = useRoute()
  const router = useRouter()
  

  const soilData = ref([]);
  const loading= ref(false);
  const farmland_id = computed(()=>route.params.farmland_id)

  // 返回农田列表
  const goBack = () => {
    router.push('/farmland/soil')
  }

  // 获取土壤数据
const fetchSoilData = async (farmland_id) => {
  try {
    loading.value = true
    const response = await getSoilData(farmland_id)
    const responseData = response.data[0]
    soilData.value = Array.isArray(responseData) ? responseData : [responseData]
  } catch (error) {
    console.error('获取土壤数据失败:', error)
    ElMessage.error('获取土壤数据失败')
    soilData.value = []
  } finally {
    loading.value = false
  }
}
onMounted(() => {
  fetchSoilData(route.params.farmland_id)
})

  </script>
  
  <style scoped>
  .detail-view {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
  }
  
  .detail-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
  }
  
  .action-btns {
    margin-top: 30px;
    text-align: center;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  </style>